<template>
    <div style="width:100%;" :class="propJson.editFlag ? 'editClass' : ''">
        <iframe :style="iframeStyle"
                :info="realSrc"
                :src="srcInfo">

        </iframe>
    </div>
</template>

<script setup lang="ts" name="ExternalIframeComponent">

import {computed, defineProps, ref} from "vue";
import {doParamCommon} from "@/utils/lowcode/thirdService.ts";

let props = defineProps(['propJson', 'commonParam']);

let propJson = computed(() => {return props['propJson']})
let commonParam = computed(() => {return props['commonParam']})
let srcInfo = ref("")

let iframeStyle = computed(() => {
    let style = "width: 100%;";
    style += "height: " + propJson.value.height + ";";
    return style;
})

let realSrc = computed(async () => {
    let temp = propJson.value.src;
    // 构建参数
    let tempInfo = {
        apiParamList: propJson.value.paramList
    }
    let res = await doParamCommon(tempInfo, commonParam.value);
    let paramStr = "";
    for (let paramName in res) {
        let paramValue = res[paramName]
        paramStr += paramName + "=" + paramValue + "&"
    }
    if (paramStr.length > 0) {
        temp += "?" + paramStr
    }
    srcInfo.value = temp;
});
</script>

<style scoped lang="less">
.editClass {
    padding: 20px;

}

</style>